<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}

			.showImages{
				position: fixed;
				width: 100%;
				height: 100vh;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(0,0,0,0.3);
			}
			.showImages img{
				display: block;
				margin: auto;
				margin-top: 10%;
				width: 300px;
				height: 500px;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IPbGICDfxoG0vjpmGgC13ar4cajjgrvy">
			//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=IPbGICDfxoG0vjpmGgC13ar4cajjgrvy"
		</script>
	</head>

	<body>
		<div id="container"></div>

		<div id="mqp">

		</div>



		<script src="/js/jquery.min.js?v=2.1.4" type="text/javascript" charset="utf-8"></script>
		<script src="http://songba.hbweiyinqing.cn/songbadaodian/static/layui/duli/layer.js"></script>
		<script type="text/javascript" th:inline="javascript">

			var map = new BMap.Map("container");
			//添加控件
			map.addControl(new BMap.NavigationControl());
			//map.addControl(new BMap.ScaleControl());
			//map.addControl(new BMap.OverviewMapControl());
			map.addControl(new BMap.MapTypeControl());

			// 创建地图实例
			var point = new BMap.Point(116.404, 39.915);
			// 创建点坐标
			map.centerAndZoom(point, 20);
			// 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom();
			var geolocation = new BMap.Geolocation();
			// 开启SDK辅助定位
			//geolocation.enableSDKLocation();
			geolocation.getCurrentPosition(function(r){
				if(this.getStatus() == BMAP_STATUS_SUCCESS){
					//var mk = new BMap.Marker(r.point);
					/* map.addOverlay(mk); */
					//map.panTo(r.point);
					/*var marker = new BMap.Marker(r.point);        // 创建标注
					marker.addEventListener("click", function(){
						alert("您点击了标注");
					});
					map.addOverlay(marker);*/
				}
			});



			function  showImages(id) {
				$.ajax({
					type: "get",
					url:  "/gps/MapUtilsController/getPhotos",
					data:{
						id:id
					},
					//async:true,
					success: function(data) {
						console.log(data);
						//layer.msg("11")
						layer.photos({
							photos: data.i
							,anim: 1, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
							tab: function(pic, layero){
								console.log(pic) //当前图片的一些信息
							}
						})
					},
					error: function() {

					}
				});
			}


			function  getPointMark() {
				$.ajax({
					type: "get",
					url:  "/gps/MapUtilsController/getOrderList",
					async:true,
					data:{
						inspectOrderNo:[[${orderNo}]]
					},
					success: function(data) {
						console.log(data)
						var l  =  data.l;
						if(l.length > 0){
							var points = new Array();  // 添加海量点数据
							var pot;
							for(var i = 0; i < data.l.length; i++){
								var model = data.l[i]
								pot =  new BMap.Point(model.lon, model.lat)
								pot.picId = model.id;
								//addClickHandler(model.projectName,pot);
								points.push(pot);
							}
							var options = {
								size: BMAP_POINT_SIZE_BIGGER,
								shape: BMAP_POINT_SHAPE_CIRCLE,
								color: '#f44336'
							}
							var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
							pointCollection.addEventListener('click', function (e) {
								showImages(e.point.picId)
								/*var point = new BMap.Point(e.point.lng, e.point.lat);
								var infoWindow = new BMap.InfoWindow(
										$("#mqp")
										,point);  // 创建信息窗口对象
								map.openInfoWindow(infoWindow,point);*/
							});
							map.addOverlay(pointCollection);  // 添加Overlay
						}
					},
					error: function() {

					}
				});
			}

			getPointMark()

			function  getPoint() {
				$.ajax({
					type: "get",
					url:  "/gps/MapUtilsController/getGpsList",
					data:{
						orderNo:[[${orderNo}]]
					},
					success: function(data) {
						var ary = new Array()
						for(var i = 0; i < data.l.length; i++){
							var temp  = new BMap.Point(data.l[i].lon, data.l[i].lat);
							if(i == 0){
								var mk = new BMap.Marker(temp);
								/* map.addOverlay(mk); */
								map.panTo(temp);
								// 创建标注
								map.addOverlay(mk);

								mk.addEventListener("mouseover", function(e){
									var point = new BMap.Point(e.point.lng, e.point.lat);
									map.openInfoWindow(new BMap.InfoWindow("起点"), point);
								})


							}else if (i == (data.l.length - 1)){
								var marker = new BMap.Marker(temp);        // 创建标注
								map.addOverlay(marker);
								marker.addEventListener("mouseover", function(e){
									var point = new BMap.Point(e.point.lng, e.point.lat);
									map.openInfoWindow(new BMap.InfoWindow("终点"), point);
								})
							}
							ary.push(new BMap.Point(data.l[i].lon, data.l[i].lat))
						}
						var polyline = new BMap.Polyline(ary,
								{strokeColor:"red", strokeWeight:3, strokeOpacity:0.9}
						);
						map.addOverlay(polyline);
					},
					error: function() {

					}
				});
			}

			getPoint()

		</script>
	</body>
</html>
